import { View, Text, Icon } from "@tarojs/components";
import Taro,{ useLoad } from "@tarojs/taro";
import "./index.scss";
import { useState } from "react";
import { request } from "@/utils/request";
export default function PaySuccess() {
  const [orderDetail, setOrderDetail] = useState<any>({});
  function getStatusName(status){
    if(status == 0 ){
      return '未缴费'
    }else if(status == 1){
      return '已缴费'
    }else if(status == 2){
      return '已完成'
    }else {
      return '已取消'
    }
  }

  function getOrderDetail(orderId) {
    request({
      url: '/api/payment/order/getPaymentOrderDetail',
      method: 'POST',
      data: {
        // 查询参数
        id: orderId
      },
      success: (data) => {
        console.log('getOrderDetail data:',data)
        data.statusName = getStatusName(data.status)
        data.pointPayMoney = data.pointPay / 100
        data.amountPayYuan = data.amountPay / 100
        setOrderDetail(data)
      }
    })
  }
  function jumpToOrderDetail(){
    Taro.reLaunch({
      url: '/pages/payOrderList/index'
    })
  }
  function goHome(){
    Taro.reLaunch({
      url: '/pages/index/index'
    })
  }
  useLoad((option) => {
    if(option.orderId){
      getOrderDetail(option.orderId)
    }
    console.log("Page loaded.");
  });

  return (
    <View className="paySuccess safe-bottom">
      <View className="header">
        <View className="icon">
          <Icon type="success" size={64} />
        </View>
        <View className="title">缴费成功</View>
      </View>
      <View className="bodyer">
        <View className="list">
          <View className="list-item">
            <View className="label">缴费单号</View>
            <View className="value">{orderDetail.orderNo}</View>
          </View>
          <View className="list-item">
            <View className="label">参保人</View>
            <View className="value">{orderDetail.name}</View>
          </View>
          <View className="list-item">
            <View className="label">参保地区</View>
            <View className="value">{orderDetail.provincesName}{orderDetail.cityName}</View>
          </View>
          <View className="list-item">
            <View className="label">缴费年份</View>
            <View className="value">{orderDetail.year}年</View>
          </View>
          <View className="list-item">
            <View className="label">积分使用</View>
            <View className="value">{orderDetail.pointPay}积分（抵扣{orderDetail.pointPayMoney}元）</View>
          </View>
          <View className="list-item">
            <View className="label">实际支付</View>
            <View className="value">{orderDetail.amountPayYuan}元</View>
          </View>
        </View>
      </View>

      <View className='footer'>
        <View className="check-btn btn" onClick={jumpToOrderDetail}>查看缴费单</View>
        <View className="primary-btn btn"  onClick={goHome}>服务首页</View>
      </View>
    </View>
  );
}
